<template name="uni-search">
	<view>
		<view style="padding:15upx;">
			<view class="uni-title">
				<!--绑定抽屉数据源-->
				<view v-for="(item,indexfid) in listData" :key="indexfid">
					<view class="title-draw">{{item.key}}</view>
					<view class="draw-container">
						<view v-for="(itemChild,index) in item.lists" :key="index" @click="menuChoose(indexfid,index,itemChild)">
							<view class="draw-option" :class="itemChild.isChecked?'draw-active':''">
								{{itemChild.key}}
								<view :class="itemChild.isChecked?'active-pic':''"></view>
							</view>
						</view>
					</view>
				</view>

				<!--按钮-->
				<view class="draw-choose">
					<view class="draw-chooseone" @click="btnReset()">重置</view>
					<view class="draw-choosetwo" @click="btnSearch()">搜索</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'uni-search',
		props: {
			/*
			 *展示抽屉数据
			 */
			listData: {
				type: Array,
				default: function() {
					return [];
				}
			},
			/**
			 * 父级页面传递条件参数
			 * */
			listParam: {
				type: Object,
				default: function() {
					return {};
				}
			},
			/**
			 * 是否跟换数据源
			 * */
			changeResult: {
				type: Boolean,
				default: function() {
					return false;
				}
			}
		},
		data() {
			return {
				//参数字段名称
				parameter: [],
				//参数符号
				operators: [],
				//参数值
				queryValue: [],
			}
		},
		methods: {
			/*
			 **重置按钮 清空所有选中Menu
			 */
			btnReset() {
				this.listData.forEach((e) => {
					e.lists.forEach((ech, chindex) => {
						if (ech.isChecked) ech.isChecked = false;
					})
				})
			},
			/**
			 * 确定按钮 传参数给列表
			 * */
			btnSearch() {
				this.listData.forEach((e, fiindex) => {
					e.lists.forEach((element, chindex) => {
						if (element.isChecked && e.key != "区域") {
							this.parameter[fiindex] = e.value;
							this.operators[fiindex] = "0";
							this.queryValue[fiindex] = element.value;
						}
					})
				})
				this.listParam.parameter = this.parameter.filter(e => e).toString();
				this.listParam.operators = this.operators.filter(e => e).toString();
				this.listParam.queryValue = this.queryValue.filter(e => e).toString();

				console.log(this.listParam)
				this.$emit("searchData", this.listParam);
			},
			/*
			 * 筛选条件Menu click选项
			 */
			menuChoose(indexfid, index, item) {
				//判断当前如果是区域的话，则需要更换数据源
				//主要模块在物资管理/备件管理
				if (this.changeResult && this.listData[indexfid].key == "区域") {
					this.$emit("changeDrawData", item.value);
				}


				if (item.isChecked) {
					this.listData[indexfid].lists.forEach((e, chindex) => {
						if (chindex == index) {
							e.isChecked = true;
						} else {
							e.isChecked = false;
						}
					})
					item.isChecked = false;
				} else {
					this.listData[indexfid].lists.forEach((e, chindex) => {
						if (chindex == index) {
							e.isChecked = true;
						} else {
							e.isChecked = false;
						}
					});
				}
			}
		}
	}
</script>

<style>
	.uni-title .title-draw {
		width: 94%;
		height: 20px;
		margin: 0 auto;
		font-size: 14px;
		color: #333333;
		margin-top: 5px;
	}

	.uni-title .top-select {
		width: 94%;
		height: 25px;
		line-height: 25px;
		font-size: 14px;
		border-radius: 3px;
		outline: none;
		margin: 0 auto;
		margin-top: 10px;
	}

	.show-box .input.data-v-3b0702b8 {
		font-size: 12px;
	}

	.uni-title .draw-choose {
		width: 80%;
		height: 32px;
		margin: 0 auto;
		margin-top: 60px;
		font-size: 16px;
		text-align: center;
		line-height: 32px;
	}

	.uni-title .draw-choose .draw-chooseone {
		width: 46%;
		height: 100%;
		border: 1px solid #458cd0;
		border-radius: 2px;
		color: #458cd0;
		float: left;
	}

	.uni-title .draw-choose .draw-choosetwo {
		width: 46%;
		height: 100%;
		border: 1px solid #458cd0;
		background: #458cd0;
		color: #ffffff;
		border-radius: 2px;
		float: right;
	}


	.draw-container {
		width: 82%;
		margin-left: 6px;
		margin-top: 5px;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 16px;
	}

	.draw-container .draw-option {
		text-align: center;
		line-height: 35px;
		background-color: #eeeeee;
		font-size: 14px;
		color: #666666;
		padding: 9px 18px;
		margin: 6px;
		border-radius: 3px;
		position: relative;
		overflow: hidden;
	}

	.draw-container .draw-active {
		background-color: #d9eafa;
		color: #458cd0;
	}

	.draw-container .active-pic {
		width: 22px;
		height: 22px;
		background: url(../../static/images/right_png.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: -10px;
		right: -10px;
	}
</style>
